<template>
	<view class="hpv-img">
		<image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="aspectFill"></image>
	</view>
	<!-- 筛选导航 -->
	<view class="tab-view"> 
		<view class="tab-toggle" v-for="(item, index) in ['全部', '9价HPV', '4价HPV', '2价HPV']" :key="index">
			<text>{{ item }}</text>
			<text :class="index == 0 ? 'checked' : ''"></text>
		</view>
	</view>
	<!-- 疫苗列表 -->
	<view class="hpv-list">
		<view>
			<view class="hpv-type">9价HPV疫苗</view>
			<view class="hpv-age">
				<text>16-26岁</text>
				<text>接种三针</text>
			</view>
			<view class="hpv-price">¥5780-¥9280</view>
		</view>
		<view class="hpv-reserve">去预约</view>
	</view>

	<!-- 高度 -->
	<view style="height:300rpx"></view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, toRefs } from 'vue'


</script>
  
  
<style>
page {
	background-color: #fafafa;
}

.hpv-img {
	height: 350rpx;
}

.hpv-img image {
	height: 350rpx;
	width: 100%;
	display: block;
}

/* tab切换 */
.tab-view {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #ffffff;
}

.tab-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100rpx;
	justify-content: center;
	position: relative;
}

.checked {
	width: 50rpx;
	height: 8rpx;
	background-color: #0d7cff;
	position: absolute;
	bottom: 0;
}

/* 疫苗列表 */
.hpv-list {
	background-color: #ffffff;
	margin: 20rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	border-radius: 20rpx;
}

.hpv-type {
	font-size: 35rpx;
}

.hpv-age {
	display: flex;
	align-items: center;
}

.hpv-age text {
	background-color: #f4f6fa;
	padding: 7rpx;
	font-size: 25rpx;
	margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
	font-weight: bold;
	color: #ff5f2c;
}

.hpv-reserve {
	align-self: flex-end;
	background-color: #0d7cff;
	padding: 15rpx 30rpx;
	border-radius: 40rpx;
	color: #ffffff;
}
</style>